<template>
  <div class="file-tree-icons">
    <i
      class="iconfont"
      v-for="icon in topIconList"
      @click="(e) => menuClick(e, icon)"
      :key="icon"
      :class="icon"
    />
  </div>
</template>

<script setup lang="ts">
import { topIconList } from "../config/index";
import { Popover } from "../../../class/Popover";

const emit = defineEmits(["menuClick", "command"]);

const dropdownList = [
  {
    title: "导入文件",
    command: "import-file",
    callback: () => emit("command", "import-file"),
  },
  {
    title: "导入文件夹",
    command: "import-folder",
    callback: () => emit("command", "import-folder"),
  },
  {
    title: "初始化默认项目",
    command: "init-default",
    callback: () => emit("command", "init-default"),
  },
];

function menuClick(e: Event, icon: string) {
  if (icon !== "icon-gengduo") return emit("menuClick", icon);
  const event = <PointerEvent>e;
  const { pageX, pageY } = event;
  const popover = new Popover();
  popover.show({
    menuList: dropdownList,
    x: pageX,
    y: pageY,
    hiddenMask: true,
    offsetX: -50,
    offsetY: 20,
    width: 150,
  });
}
</script>

<style lang="css" scoped>
.file-tree-icons {
  border-bottom: solid 1px var(--t-main-border-color);
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.file-tree-icons i {
  color: var(--t-main-font-color);
  margin-left: 10px;
  cursor: pointer;
}
.file-tree-icons i:hover {
  color: #409eff;
}
.icon-gengduo:focus-visible {
  outline: none;
}
</style>
